<template>
    <a-modal :title="$t('创建块存储卷快照复制策略')" v-model='isShow' :maskClosable='false' v-dragModal :width="620"
        :after-close="handleClose">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-spin :spinning="loading">
                <a-form-model-item :label="$t('策略名称') + ':'" prop="name">
                    <a-input v-model="form.name" :placeholder="$t('Enter') + $t('策略名称')" style="width: 284px;" />
                </a-form-model-item>
                <a-form-model-item :label="$t('复制周期') + ':'" prop="raw_cycle_type">
                    <a-radio-group v-model="form.raw_cycle_type" @change="cycleChange">
                        <a-radio v-for="item of cycleTypeGroup" :value="item.value" :key="item.value">{{
                            item.label
                        }}</a-radio>
                    </a-radio-group>

                    <div v-if="form.raw_cycle_type == '2'" class="mt-8 flex">
                        <div>{{ $t('每周') }}</div>
                        <div>
                            <a-form-model-item prop="weekCheck">
                                <a-checkbox-group class="ml-16" v-model="form.raw_cycles" :options="plainOptions" />
                            </a-form-model-item>
                        </div>
                    </div>

                    <div v-if="form.raw_cycle_type == '3'" class="mt-8">
                        <div class="flex">
                            <span class="mt-6 mr-8">{{ $t('每月') }}</span>
                            <a-form-model-item prop="monthCheck">
                                <Calendar @get-date="getDate" />
                            </a-form-model-item>
                        </div>
                    </div>
                </a-form-model-item>

                <a-form-model-item :label="$t('复制时间') + ':'" prop="raw_time_type">

                    <a-radio-group v-model="form.raw_time_type" @change="timeChange">
                        <a-radio v-for="item of typeGroup" :value="item.value" :key="item.value">{{
                            item.label
                        }}</a-radio>
                    </a-radio-group>

                    <div v-if="form.raw_time_type == '1'" class="mt-8 flex">
                        <a-form-model-item prop="raw_start_time">
                            <a-time-picker v-model="form.raw_start_time" format="HH:mm:ss" valueFormat="HH:mm:ss"
                                @change="startChange" :placeholder="$t('Choose') + $t('Time')" />
                        </a-form-model-item>
                        <span class="ml-16">-</span>
                        <a-form-model-item prop="raw_end_time">
                            <a-time-picker class="ml-16" v-model="form.raw_end_time" format="HH:mm:ss"
                                valueFormat="HH:mm:ss" :disabledHours="getDisabledHours"
                                :disabledMinutes="getDisabledMinutes" :disabledSeconds="getDisabledSeconds"
                                :placeholder="$t('Choose') + $t('Time')" />
                        </a-form-model-item>
                    </div>

                    <div style="display: flex;" v-if="form.raw_time_type == '1'">
                        <span>{{ $t('每') }}</span>
                        <a-form-model-item prop="raw_every_few">
                            <a-input-number prop="raw_every_few" class="ml-8 mt-4" style="width: 148px" :min="1"
                                :precision="0" v-model="form.raw_every_few" :placeholder="$t('Enter') + $t('数值')" />
                        </a-form-model-item>
                        <a-radio-group style="margin-left: 8px;margin-top: 4px" v-model="form.raw_every_few_type"
                            @change="fewChange">
                            <a-radio-button v-for="item of everyGroup" :value="item.value" :key="item.value">{{
                                item.label }}</a-radio-button>
                        </a-radio-group>
                        <span style="margin-left: 8px;">{{ $t('执行一次') }}</span>
                    </div>

                    <div v-if="form.raw_time_type == '2'">
                        <a-form-model-item prop="raw_time">
                            <a-time-picker v-model="form.raw_time" format="HH:mm:ss" valueFormat="HH:mm:ss"
                                :placeholder="$t('Choose') + $t('Time')" />
                            <span class="ml-8">{{ $t('执行一次') }}</span>
                        </a-form-model-item>
                    </div>

                </a-form-model-item>
            </a-spin>
        </a-form-model>

        <template slot="footer">
            <a-button type='primary' @click="handleCreate">{{ $t('保存') }}</a-button>
            <a-button @click="handleClose">{{ $t('Cancel') }}</a-button>
        </template>

    </a-modal>
</template>

<script>
import Calendar from './calendar.vue'

export default {
    components: { Calendar },
    data() {
        return {
            isShow: false,
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            form: {
                name: '',
                raw_cycle_type: 1,
                raw_cycles: [],
                raw_time_type: 1,
                raw_start_time: '',
                raw_end_time: '',
                raw_every_few: '',
                raw_every_few_type: 1,
                raw_time: '',
                target_type: 1,
                strategy_type: 3,
                weekCheck: '',
                monthCheck: undefined,
            },
            rules: {
                name: [
                    { required: true, message: this.$t('Enter') + this.$t('名称'), trigger: 'blur' },
                    { pattern: /^[A-Za-z0-9_]{1,128}$/, message: this.$t('名称仅支持大小写英文字母 + 数字 + 英文下划线，1-128 个字符'), trigger: 'blur' }
                ],
                raw_cycle_type: [
                    { required: true, trigger: 'change' },
                ],
                weekCheck: [
                    { validator: (rules, value, callback) => { this.cycleValidator(rules, value, callback) }, trigger: 'change' }
                ],
                monthCheck: [
                    { validator: (rules, value, callback) => { this.cycleValidator(rules, value, callback) }, trigger: 'change' }
                ],
                raw_time_type: [
                    { required: true, message: this.$t('Choose') + this.$t('复制时间'), trigger: 'change' },
                ],
                raw_every_few: [
                    { validator: (rules, value, callback) => { this.fewValidator(rules, value, callback) }, trigger: 'change' },
                ],
                raw_end_time: [
                    { validator: (rules, value, callback) => { this.nullValidator(rules, value, callback) }, trigger: 'change' },
                ],
                raw_start_time: [
                    { validator: (rules, value, callback) => { this.nullValidator(rules, value, callback) }, trigger: 'change' },
                ],
                raw_time: [
                    { validator: (rules, value, callback) => { this.nullValidator(rules, value, callback) }, trigger: 'change' },
                ]
            },
            cycleTypeGroup: [
                { value: 1, label: '每日' },
                { value: 2, label: '每周' },
                { value: 3, label: '每月' },
            ],
            typeGroup: [
                { value: 1, label: '时间段' },
                { value: 2, label: '时间点' },
            ],
            everyGroup: [
                { value: 1, label: '分钟' },
                { value: 2, label: '小时' },
            ],
            plainOptions: [
                { label: '一', value: '1' },
                { label: '二', value: '2' },
                { label: '三', value: '3' },
                { label: '四', value: '4' },
                { label: '五', value: '5' },
                { label: '六', value: '6' },
                { label: '七', value: '7' },
            ],
            loading: false,
                };
    },
    methods: {
        handleCreate() {
            const params = {
                name: this.form.name,
                raw_cycle_type: this.form.raw_cycle_type,
                raw_cycles: this.form.raw_cycles,
                raw_time_type: this.form.raw_time_type,
                raw_start_time: this.form.raw_start_time,
                raw_end_time: this.form.raw_end_time,
                raw_every_few: this.form.raw_every_few,
                raw_every_few_type: this.form.raw_every_few_type,
                raw_time: this.form.raw_time,
                target_type: this.form.target_type,
                strategy_type: this.form.strategy_type,
            }
            this.$refs.ruleForm.validate(async valid => {
                if (valid) {
                    this.loading = true
                    const { data } = await this.$api.data.appendStrategyCopyApi(params)
                    this.model(data.id) //返回模板
                    this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag == '0') {
                        this.$emit('get-list')
                        this.handleClose()
                    }
                    this.loading = false
                } else {
                    return false;
                }
            });
        },
        handleClose() {
            this.$refs['ruleForm'].resetFields();
            this.isShow = false
        },
        cycleValidator(rule, value, callback) {
            if (this.form.raw_cycle_type === 1) {
                callback();
            } else {
                if (this.form.raw_cycles.length === 0) {
                    callback(this.$t('Choose') + this.$t('时间'));
                }else {
                    callback();
                }
            }
        },

        fewValidator(rule, value, callback) {
            if (value) {
                if (this.form.raw_every_few_type == '1') {
                    if (value < 10 || value > 59) callback(this.$t('分钟范围为10-59'))
                    else callback()
                } else if (this.form.raw_every_few_type == '2') {
                    if (value < 1 || value > 23) callback(this.$t('小时范围为1-23'))
                    else callback()
                }
            } else {
                callback(this.$t('Enter') + this.$t('数值'))
            }
        },
        nullValidator(rule, value, callback) {
            if (!value) callback(this.$t('Choose') + this.$t('时间'))
            else callback()
        },
        fewChange() {
            this.$nextTick(() => this.$refs.ruleForm.validateField(['raw_every_few']))
        },
        startChange(value) {
            if (value) {
                let time = value
                let timeArr = time.split(':')
                let hour = parseInt(timeArr[0])
                let minute = parseInt(timeArr[1])
                let second = parseInt(timeArr[2])
                // if (hour < 23) hour = hour
                // else if (hour == 23) minute = 59
                if (second < 59) second = second + 1
                else if (second == 59) second = 59
                this.form.raw_end_time = `${hour}:${minute}:${second}`
            }
        },
        getDisabledHours() {
            if (this.form.raw_start_time) {
                let hours = []
                let time = this.form.raw_start_time
                let timeArr = time.split(':')
                for (let i = 0; i < parseInt(timeArr[0]); i++) {
                    hours.push(i)
                }
                if (parseInt(timeArr[1]) === 59) hours.push(parseInt(timeArr[0]))
                return hours
            }
        },
        getDisabledMinutes(selectedHour) {
            if (this.form.raw_start_time) {
                let time = this.form.raw_start_time
                let timeArr = time.split(':')
                let minutes = []
                if (selectedHour == parseInt(timeArr[0])) {
                    for (let i = 0; i < parseInt(timeArr[1]); i++) {
                        minutes.push(i)
                    }
                }
                return minutes
            }
        },
        getDisabledSeconds(selectedHour, selectedMinute) {
            if (this.form.raw_start_time) {
                let time = this.form.raw_start_time
                let timeArr = time.split(':')
                let seconds = []
                if (selectedHour == parseInt(timeArr[0]) && selectedMinute == parseInt(timeArr[1])) {
                    for (let i = 0; i < parseInt(timeArr[2]) + 1; i++) {
                        seconds.push(i)
                    }
                }
                return seconds
            }
        },
        getDate(list) {
            this.form.raw_cycles = list
            if(this.form.raw_cycles.length != 0)  this.$nextTick(() => this.$refs.ruleForm.validateField(['monthCheck']))
        },
        cycleChange() {
            this.form.raw_cycles = []
        },
        timeChange() {
            this.form.raw_start_time = ''
            this.form.raw_end_time = ''
            this.form.raw_every_few = ''
            this.form.raw_time = ''
        }
    }
}
</script>
<style scoped>
.ant-form-item {
    margin-bottom: 12px
}
</style>